import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  generateHideSelector,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'
import { SoCommonPage } from './common'

export class SoWebPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoWebPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoWebPage {
    if (!SoWebPage.instance) {
      SoWebPage.instance = new SoWebPage()
    }
    return SoWebPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
/* 顶部菜单 */
#header {
  &.shadow {
    #head {
      .form {
        margin-bottom: 16px !important;
      }
      
      /* 隐藏悬浮搜索标签 */
      #head_pdr_guide {
        display: none !important;
      }
    }
  }

  .inner {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    
    #g-hd-nav {
      display: flex !important;
      justify-content: center !important;
      float: none !important;
      
      #head {
        .ac_wrap {
          .ac_menu {
            > li {
              /* 搜索历史高亮 */
              &:has(a.del) {
                color: var(${this.themeVarService.search.history.text}) !important;
                
                b {
                  color: var(${this.themeVarService.search.history.text}) !important;
                }
              }
              
              /* 搜索建议高亮 */
              span {
                color: var(${this.themeVarService.search.suggestions.text}) !important;

                &:has(> b) {
                  color: var(${this.themeVarService.em.text}) !important;
                }
                
                b {
                  color: var(${this.themeVarService.search.suggestions.text}) !important;
                }
              }
            }
          }
        }
        
        .adv-search-wrap {
          .adv-search-btn {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &.hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
        
        #head_pdr_guide {
          dt {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
        }
      }
    }
    
    .hd-rtools {
      .menu {
        .title {
          color: var(${this.themeVarService.search.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
            text-decoration: none !important;
          }
          
          &.hover {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
        }
        
        .setting-group {
          background-color: transparent !important;
          border: none !important;
        }
      }
    }
  }
}

/* 搜索分类 */
#tabs-wrap:has(${generateHideSelector('#g-hd-tabs')}) {
  height: 12px !important;
}
#tabs-wrap {
  border-bottom: none !important;
  background-color: var(${this.themeVarService.search.header.background}) !important;
  display: flex !important;
  justify-content: center !important;
  padding-left: 0 !important;
  
  ul#g-hd-tabs {
    > li {
      /* 悬浮 */
      &:hover {
        > a {
          color: var(${this.themeVarService.tab.textHover}) !important;
        }
      }
    
      /* 当前页 */
      &.g-hd-cur {
        a {
          color: var(${this.themeVarService.tab.textActive}) !important;
        }
        
        span {
          background: var(${this.themeVarService.tab.textActive}) !important;
          width: auto !important;
        }
      }
      
      /* 其他页 */
      > a {
        color: var(${this.themeVarService.tab.text}) !important;
      }
    }
    
    /* 更多 */
    #g-hd-tabs-more {
      li:hover {
        a {
          color: var(${this.themeVarService.tab.textHover}) !important;
        }
      }
    }
  }
}

#warper {
  #container {
    padding-left: 0 !important;
    
    #main {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
      width: auto !important;
      float: none !important;
      
      #so_top {
        margin: 0 auto !important;
        margin-bottom: 10px !important;
        width: auto !important;

        #so-pdr-guide {
          dt {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
          
          dd {
            a {
              text-decoration: none !important;
              
              &:hover {
                color: var(${this.themeVarService.link.default.textHover}) !important;
                text-decoration: none !important;
              }
            }
          }
          
          .so-pdr-bd {
            width: auto !important;
          }
        }
      }
      
      /* 广告 */
      #m-spread-left {
        margin: 0 auto !important;
        background: var(${this.themeVarService.search.resultItem.background}) !important;
        box-shadow: var(${this.themeVarService.search.resultItem.shadow}) !important;
        border-radius: ${this.themeVarService.search.resultItem.borderRadius} !important;
        padding: ${this.themeVarService.search.resultItem.padding} !important;
        overflow: hidden !important;
        margin-bottom: ${this.themeVarService.search.resultItem.gap} !important;
        
        .spread {
          background-color: transparent !important;
          width: 100% !important;

          ul#e_idea_pp, ul#e_idea_pp_vip {
            width: auto !important;

            li {
              ${this.searchCommonStyles.titleStyles('a.e_haosou_fw_bg_title')}
              
              a.e_haosou_fw_bg_title {
                display: inline-flex !important;
                width: 100% !important;
              }
              
              a.inner_desc {
                color: var(${this.themeVarService.search.default.text}) !important;
              }
              
              .e-tag {
                > img {
                  width: 16px !important;
                }
              }
            }
          }
        }
      }

      /* 搜索结果列表*/
      .result {
        ${this.searchCommonStyles.resultContainerStyles({ fullWidth: false })}

        /* 非结果项 */
        
        /* 结果项 */
        .res-list, .res-recommend-tag-cover {
          ${this.searchCommonStyles.resultItemStyles()}
        }
        .res-recommend-tag-cover {
          .title {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
        }
        .res-list {
          margin-bottom: 0 !important;

          a {
            color: var(${this.themeVarService.link.default.text}) !important; 
          }

          /* 标题 */
          h3 {
            ${this.searchCommonStyles.titleStyles()}
          }
          
          /* 描述*/
          .mh-content-desc-info {
            color: var(${this.themeVarService.search.default.text}) !important;
          }
          
          .g-card-layout {
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            padding-top: 0 !important;
          }
          
          .g-mohe-radius {
            background: transparent !important;
            box-shadow: none !important;
            padding-top: 0 !important;
          }
          
          .g-btn-more {
            color: var(${this.themeVarService.search.default.text}) !important;
            border: none !important;
            
            &:hover {
              background-color: transparent !important;
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
          
          .g-select {
            .g-select-default {
              border: 1px solid var(${this.themeVarService.default.border.colorNeutral}) !important;
            }
          }
          
          /* AI 回答 */
          #mohe-ai_common {
            .mh-title-cont {
              .mh-title-text {
                color: var(${this.themeVarService.search.default.text}) !important;
              }
            }
            
            .mh-think-cont {
              border-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
              
              .mh-think-info-item {
                &::after {
                  border-left-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
                }
              }
            }
            
            .mh-summary-cont {
              .mh-module-item-cont {
                background-color: transparent !important;
                
                .mh-box-head {
                  border-bottom: none !important;
                
                  .mh-box-head-text {
                    color: var(${this.themeVarService.search.default.text}) !important;
                    border-left: 2px solid #ff6e26 !important;
                    padding-left: 4px !important;
                  }
                }
                
                .mh-link-more {
                  .mh-ai-bottom-tip {
                    color: var(${this.themeVarService.search.default.text}) !important;
                  }
                }
              }
            }
          }
          #mohe-360shoutiao_AI {
            .mh-title {
              color: var(${this.themeVarService.search.default.text}) !important;
            }
            
            .markdown-container {
              h2 {
                color: var(${this.themeVarService.search.default.text}) !important;
                background-image: none !important;
              }
              
              .table_wrap {
                td {
                  color: var(${this.themeVarService.search.default.textBase}) !important;
                }
              }
            }
          }
          
          /* 火车 */
          #mohe-biu_train {
            .mh-operation-area {
              .mh-address-input-cont {
                border: 1px solid var(${this.themeVarService.default.border.colorNeutral}) !important;
                
                input {
                  background-color: transparent !important;
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
                
                .mh-address-input-from-cont {
                  border-right-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
                }
              }
            }
            
            .mh-zz-cont {
              .mh-zz-header {
                background-color: transparent !important;
                
                .mh-zz-header-title {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
              
              .mh-zz-list {
                .mh-zz-item-info-label {
                  color: var(${this.themeVarService.search.default.text}) !important;
                }
              }
            }
            
            .mh-footer {
              border-top: none !important;
            }
          }
          
          /* 名人 */
          #mohe-famous {
            .mh-imgs {
              li {
                border-left: none !important;
              }
            }
          }
          
          /* 360 图片 */
          #mohe-360pic {
            .mh-title-ai-icon-cont {
              .mh-title-ai-icon-inner {
                background-color: transparent !important;
              }
              
              .mh-title-ai-icon-mask {
                background: transparent !important;
              }
            }
          }
          
          /* 药品推荐 */
          #mohe-zz_medicine_jd {
            .g-card-layout {
              .mh-top-cont {
                background: transparent !important;
              }
              
              .mh-instruction-cont {
                border-bottom: none !important;
              }
            }
          }
          
          /* 城市旅游 */
          [id*="city_travel_search"] {
            #mohe-map_new_catering_normal {
              .g-mohe-radius {
                .datalist {
                  border-bottom: none !important;
                
                  #map_lis_bs_con {
                    border-bottom: none !important;
                    
                    .map_business_con {
                      .bs-title, .bs-info-more {
                        color: var(${this.themeVarService.link.default.text}) !important;
                      }
                      .bs-info {
                        color: var(${this.themeVarService.search.default.text}) !important;
                      }
                    }
                  }
                  
                  .mh-map_new-left {
                    .mh-map_new-index, .mh-map_new-info {
                      color: var(${this.themeVarService.search.default.text}) !important;
                    }
                    
                    .mh-name {
                      color: var(${this.themeVarService.link.default.text}) !important;
                    }
                  }
                }
              }
            }
          }
          
          /* 医院排行榜 */
          #mohe-biu_sick_hospital_city {
            tbody {
              td {
                border-bottom: none !important;
                
                .mh-group-item {
                  span {
                    color: var(${this.themeVarService.search.default.text}) !important;
                  }
                }
              }
            }
          }
        }
      }
      
      /* 相关搜索*/
      ${this.commonPage.relationStyles()}
    }
  }

  #footer {
    background-color: transparent !important;
    padding-left: 0 !important;
    
    #page {
      text-align: center !important;
    }
    
    .footer {
      text-align: center !important;
      
      a {
        color: var(${this.themeVarService.link.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
          text-decoration: none !important;
        }
      }
    }
  }
}
`
  }
}
